<template>
  <div class="test_data">
    <div class="test_data_top">
      <div class="test_data_top_text">检测数据</div>
    </div>
    <div class="test_data_middle">
      <div class="test_data_middle_text">流模分析</div>
      <div class="test_data_middle_content"></div>
    </div>
    <div class="test_data_bottom">
      <div class="test_data_bottom_content">
        <div class="test_data_bottom_content_model"></div>
      </div>
      <div class="test_data_bottom_text">
        <div class="test_data_bottom_text_content">
          <div class="top">
            <div class="top_left">80</div>
            <div class="top_right">m³</div>
          </div>
          <div class="bottom">渗流量</div>
        </div>

        <div class="test_data_bottom_text_content">
          <div class="top">
            <div class="top_left">1.2</div>
            <div class="top_right">m/s</div>
          </div>
          <div class="bottom">流速</div>
        </div>

        <div class="test_data_bottom_text_content">
          <div class="top">
            <div class="top_left">30</div>
            <div class="top_right">KN/m³</div>
          </div>
          <div class="bottom">渗压</div>
        </div>

        <div class="test_data_bottom_text_content">
          <div class="top">
            <div class="top_left">3</div>
            <div class="top_right">cm</div>
          </div>
          <div class="bottom">位移</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.test_data {
  .test_data_top {
    background: url("../../../../../../assets/images/home/top.png");
    background-size: cover;
    .test_data_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 24px;
      /* identical to box height */
      color: #ffffff;
    }
  }
  .test_data_middle {
    margin: 15px 0 10px 15px;
    display: flex;
    flex-direction: column;
    .test_data_middle_text {
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 18px;
      letter-spacing: 0.6px;
      color: #e8effb;
    }
    .test_data_middle_content {
      margin-top: 15px;
      background: rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-sizing: border-box;
      border-radius: 4px;
      width: 445px;
      height: 149px;
    }
  }
  .test_data_bottom {
    margin: 15px 0 10px 15px;
    .test_data_bottom_content {
      width: 445px;
      height: 300px;
      background: rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-sizing: border-box;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      .test_data_bottom_content_model {
        background: url("../../../../../../assets/images/home/大坝model.png");
        width: 369px;
        height: 300px;
        background-size: cover;
      }
    }
    .test_data_bottom_text {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      .test_data_bottom_text_content {
        display: flex;
        flex-direction: column;
        font-family: OPPOSans;
        font-style: normal;
        font-weight: normal;
        .top {
          display: flex;
          align-items: flex-end;
          .top_left {
            font-size: 24px;
            line-height: 32px;
            /* identical to box height */
            color: #e8effb;
          }
          .top_right {
            font-size: 20px;
            line-height: 29px;
            /* identical to box height, or 144% */
            color: #e8effb;
            mix-blend-mode: normal;
            opacity: 0.4;
          }
        }
        .bottom {
          font-size: 14.4px;
          line-height: 29px;
          /* identical to box height, or 200% */
          display: flex;
          align-items: center;
          letter-spacing: 0.6px;
          color: #e8effb;
        }
      }
    }
  }
}
</style>